<template>
	<view>
		<!-- <uni-nav-bar left-text="所有订单" :background-color="background" :border-bottom="true" height="400"></uni-nav-bar> -->
		<uni-section title="所有用户" type="line" padding>
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
		</uni-section>
		
		<!-- 订单列表 -->
		<view>
			<view v-if="current === 0">
				<view class="user-list" v-for="item in user_list" :key="uid">
					<uni-card v-if="item.state===0" :title="item.uname" :sub-title="item.uid" :extra="items[item.state]" :thumbnail="order_picture" @click="enterUser(item.uid)">
					</uni-card>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="user-list" v-for="item in user_list" :key="uid">
					<uni-card v-if="item.state===1"  :title="item.uname" :sub-title="item.uid" :extra="items[item.state]" :thumbnail="order_picture" @click="enterUser(item.uid)">
					</uni-card>
				</view>
			</view>
			<view v-if="current === 2">
				<view class="user-list" v-for="item in user_list" :key="uid">
					<uni-card v-if="item.state===2" :title="item.uname" :sub-title="item.uid" :extra="items[item.state]" :thumbnail="order_picture" @click="enterUser(item.uid)">
					</uni-card>
				</view>
			</view>
		</view>
		<tabBar :pagePath="'/pages/user/user'"></tabBar>
		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				background: "#76EEC6",
				currentTab:0,
				items: ['管理员', '维修人员', '普通用户'],
				current: 0,
				activeColor: '#007aff',
				styleType: 'button',
				order_picture: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
				user_list: [
					{
						state: 0,
						uname: "张三",
						uid: 10001,
						photo: ""
					},
					{
						state: 0,
						uname: "李四",
						uid: 10002,
						photo: ""
					},
					{
						state: 1,
						uname: "王五",
						uid: 10003,
						photo: ""
					},
					{
						state: 2,
						uname: "赵六",
						uid: 10004,
						photo: ""
					},
					{
						state: 2,
						uname: "Cindy",
						uid: 10005,
						photo: ""
					}
				]
			}	
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			enterUser(uid) {
				console.log("跳转到用户详情页")
				uni.navigateTo({
					url:"./user_detail"
				});
			}
		}
	}
</script>

<style>
	.uni-padding-wrap {
		width: 710rpx;
		padding: 0px 0px;
	}
	.uni-common-mt {
		margin-top: 0px;
	}
	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: 150px;
		text-align: center;
	}
	.content-text {
		font-size: 14px;
		color: #666;
	}
	.user-list {
		
	}
	.order-item {
		
	}
</style>